<template>
	<view>
		
		
		<div class="pdf_view" v-if="pdf_view_url" style="top: 0rpx;">
			<div style="text-align: center;background-color: #fff;height: 50px;width: 100%;" class="pdfViewBtn"  @click="pdf_view_url = ''">
				<span class="pdfViewBtn" style="margin: 0 auto;">关闭</span>
			</div>
			<scroll-view :scroll-y="true" class="scrollView" style="min-height: 95vh;text-align: right;">
				<iframe style="width: 100%; height: 95vh;" :src="'./static/pdfjs/web/viewer.html?file=' + pdf_view_url" frameborder="0"></iframe>
			</scroll-view>
		</div>
		
		
		<view class="lis_t">
			<image :src="faceUrl" mode="widthFix"></image>
			<view class="shuming">
				<text>书名：{{ clazzName }}</text>
			</view>
		</view>
		
		<!-- 横线 -->
		<hengxian v-if="summary"></hengxian>
		
		<view class="kechbos" v-if="summary">
			<view class="kc_list" >
				<text class="bt">{{ summary_alias }}:</text>
				<scroll-view v-if="summary" :scroll-y="true" class="scrollView" v-html="summary">
					
				</scroll-view>
				<view  v-else style="padding: 30rpx 0; text-align: center;">
					暂无内容
				</view>
			</view>
		</view>
		
		<!-- 横线 -->
		<hengxian v-if="target"></hengxian>
		
		<view class="kechbos" v-if="target">
			<view class="kc_list">
				<text class="bt">{{ target_alias }}:</text>
				<scroll-view v-if="target" :scroll-y="true" class="scrollView" v-html="target">
				</scroll-view>
				<view v-else style="padding: 30rpx 0; text-align: center;">
					暂无内容
				</view>
			</view>
		</view>
		
		<!-- 横线 -->
		<hengxian v-if="beforeOutLineTrue"></hengxian>
		
		
		<view class="kechbos" v-if="beforeOutLineTrue">
			<view class="kc_list">
				<text class="bt">{{ outlineAlias }}:</text>
				<scroll-view v-if="beforeOutLineTrue" :scroll-y="true" class="scrollView" style="min-height: 800rpx;">
					<iframe @error="iframeError" style="width: 100%; height: 100%;" :src="'./static/pdfjs/web/viewer.html?file=' + outline" frameborder="0"></iframe>
				</scroll-view>
				<view v-else style="padding: 30rpx 0; text-align: center;">
					暂无内容
				</view>
				<div v-if="beforeOutLineTrue" style="margin-top: 20rpx;">
					<a @click="pdfViewMethod(outline)" class="pdfViewBtn">预览</a>
				</div>
			</view>
			
		</view>
		
		<!-- 横线 -->
		<!-- <hengxian></hengxian> -->
		
		<!-- 课程列表 -->
		<!-- <view class="kechbos">
			<view class="kc_list">
				<text class="bt">思政课程</text>
				<text class="nr" v-for="(itam,idnex) in cons" @click="tz(itam.id)">{{itam.name}}</text>
			</view>
		</view> -->
		<view class="fixedBox">
			<text @click="tzdir">目录</text>
		</view>
	</view>
</template>

<script>
	// import Base64 from "base-64"
	export default{
		data(){
			return{
				id:[],
				con:[],
				cons:[],
				faceUrl:'',
				clazzName: '暂无',
				summary: "",
				summary_alias: "课程概述",
				outline: "",
				outlineAlias: "课程大纲",
				target_alias: "",
				target: "",
				pdf_view_url: "",
				beforeOutLineTrue: false,
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		created() {
			let that = this
			let params = {
				"mindClazzId":that.id
			}
			let paramss = {
				"id": that.id,
				"pageNo":1,
				"pageSize":99999
			}
			// let headers={
			// 	  'content-type': 'application/x-www-form-urlencoded',
			// 	  'token': uni.getStorageSync('token')
			// }
			that.pyReq(that.$http.getMindClazzDetailSecond,params,function(res){
				console.log(res);
				if(res.code == 0) {
					const { 
						faceUrl,
						clazzName,
						summary,
						outline,
						outlineAlias,
						target_alias,
						summary_alias,
						target
					} = res.result;
					that.faceUrl = faceUrl;
					that.clazzName = clazzName;
					that.summary = summary;
					that.beforeOutLineTrue = outline.indexOf("null") === -1;
					// that.outline = encodeURIComponent(Base64.encode(encodeURI(outline)));
					that.outline = outline;
					that.outlineAlias = outlineAlias || "课程大纲";
					that.target_alias = target_alias || "课程目标";
					that.summary_alias = summary_alias || "课程概述";
					that.target = target;
				}
			});
			
			that.pyReq(that.$http.getMindClazzChapterList,paramss,function(res){
					  that.cons = res.result
			});
			
		},
		methods: {
			pdfViewMethod(item) {
				this.pdf_view_url = item;
			},
			iframeError() {
				console.log("pdf加载错误");
			},
			//导航
			tz(id){
				uni.navigateTo({
					url:'./kechengxq?id='+id
				})
			},
			tzdir() {
				uni.navigateTo({
					url:'./dir?name=' + this.clazzName + "&id=" + this.id
				})
			}
		}
	}
</script>
<style>
	.lis_t{
		display: flex;
		margin: 30upx 20upx;
	}
	.lis_t>image{
		width: 280upx;
		height: 280upx;
	}
	.shuming{
		width: 394upx;
	}
	.shuming text{
		display: block;
		font-size: 26upx;
		font-weight: 700;
		margin-top: 15upx;
		line-height: 40upx;
		/* overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap; */
	}
	
	.kechbos{
		
	}
	.kc_list{
		margin: 44upx 40upx;
		
	}
	.kc_list>text{
		display: block;
	}
	.bt{
		font-size: 30upx;
		font-weight: 700;
		margin-bottom: 20upx;
	}
	.nr{
		font-size: 26upx;
		line-height: 56upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		border-bottom: solid 1px #999999;
		
	}
	.scrollView {
		height: 25vh;
		overflow-y: auto;
	}
	.fixedBox {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 150rpx;
		background-color: #1B9AF7;
		border-color: #1B9AF7;
		color: #FFF;
		position: fixed;
		bottom: 50rpx;
		right: 50rpx;
		font-size: 36rpx;
		font-weight: bolder;
	}
</style>
